<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提高2</title>
    <style type="text/css">
        .one {
            color: #ff7164;
        }

        .three {
            background-color: pink;
            width: 100px;
            height: 100px;
        }

        span {
            background-color: pink;
            height: 100px;
            width: 100px;
        }

        /*       div.four{
                   background-color: pink;
                   width: 100px;
                   height: 100px;
                   display: inline;   !*块级标签转化为行内标签模式*!
               }*/
        span.four {
            background-color: hotpink;
            width: 100px;
            height: 100px;
            display: block; /*行内标签转化为级块标签模式*/
        }

        .a {
            background-color: deeppink;
            width: 100px;
            height: 80px;
            display: inline-block; /*行内标签转化为行内块级标签模式*/
        }

        a[title] {
            color: #a9a7f0;
        }

        div[class^=font] { /*class^=font表示font开始位置就行了*/
            color: #ff391c;
        }

        div[class$=footer] { /*class^=font表示footer结束位置就行了*/
            color: deepskyblue;
        }

        div[class*=jd] { /*任意位置都可以*/
            color: #4a38ff;
        }

        /* .类名    类选择器
         :first-child   伪类选择器
         ::first-letter  伪元素选择器*/
        p::first-letter { /*文本第一个字*/
            color: #ff1401;
            font-size: 60px;
        }

        p::first-line { /*文本第一行*/
            color: #9e200b;
        }

        p::selection { /*可改变选中文本的样式*/
            color: #4f9e2d;
        }

        .five:before { /*前面添加文本*/
            content: "你是？";
        }

        .five::after { /*后面添加文本*/
            content: "？傻逼";
        }

        .six {
            background-color: pink;
            width: 300px;
            height: 300px;
            background-image: url(../images/1.jpg);
            background-repeat: no-repeat /*repeat-x    repeat-y*/;
            /*利用方位名词 top（上）    （下）bottom 来更改背景图片的位置*/
            /*background-position: center;*/
            /*默认是左上角 left top*/
            background-position: 20px 30px;
            /*          scroll: 背景图像是随对象内容滚动
                        fixed : 背景图像固定*/
            background-attachment: scroll /*fixed*/;
            /*background: rgba(0,0,0,0.2);*/
            background-size: cover;
            /*会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏
            图片进行等比例缩放图片一定要保证宽度和高度同时满足盒子的大小  势必会有部分超出去,就看不见了*/
            background-size: contain;
            /*图片进行等比例缩放 果图片的高度或者宽度有一个和盒子一样大了,就不在缩放这样的好处就是保证了图片的完整。不会有缺失的一部分, 但是会有部分裸露*/
        }

        body {
            background-color: #98fd08;
        }

        .seven:first-child {
            color: #90beec;
            font: 700 80px "微软雅黑";
            text-shadow: 0px 3px 3px #90beec;
        }
    </style>
    <link rel="stylesheet" href="提高2.css " type="text/css"><!--外部样式表-->
</head>
<body>
<div class="one">内部样式表</div>
<div style="color: skyblue;">行内样式表</div>
<div class="two">外部样式表</div>
<div class="three">123</div>
<p>456</p>
<div class="three">789</div>
<span>123</span>
<span>456</span>
<span>789</span><br>
---------------------------
<br>
<div class="four">123</div>
<div class="four">456</div>
<div class="four">789</div>
<span class="four">abc</span>
<span class="four">def</span>
<span class="four">ghi</span>
<a class="a" href="#">123</a><a href="#">456</a>
<br>
<a href="https://www.baidu.com/" title="我是一个百度">百度</a>
<a href="https://www.sina.com.cn/" title="我是一个新浪">新浪</a>
<a href="http://www.sohu.com/">搜狐</a>
<a href="https://www.163.com/">网易</a>
<a href="http://www.tudou.com/">土豆</a>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="sub-footer">属性选择器</div>
<div class="jd-footer">属性选择器</div>
<div class="news-jd-nav">属性选择器</div>
<div class="news-jd-header">属性选择器</div>
<p>伪元素<br>选择器</p>
<div class="five">伪元素选择器</div>
<div class="six"></div>
<div class="seven">我是凸起的文字</div>
<div class="seven">我是凹下的文字</div>
</body>
</html>